<template>
	<view class="add-addr">
		<view class="add-addr-item">
			<view class="add-addr-label">姓名</view>
			<view class="add-addr-body">
				<input type="text" class="addr-input" placeholder="收货人姓名" v-model="form.name"/>
			</view>
		</view>
		<view class="add-addr-item">
			<view class="add-addr-label">手机号码</view>
			<view class="add-addr-body">
				<input type="number" pattern="\d*" @blur="rules" class="addr-input" placeholder="收货人手机号码" v-model="form.mobile" maxlength="11"/>
			</view>
		</view>
		<view class="add-addr-item">
			<view class="add-addr-label">省、市、区</view>
			<view class="add-addr-body" @tap="selectAddr()">
				<view class="addr-select">
					<text v-if="!form.province_id">请选择省市区</text>
					<text v-else>{{form.province_name}} {{form.city_name}} {{form.area_name}}</text>
				</view>
				<i class="icon icon-right">&#xe638;</i>
			</view>
		</view>
		<view class="add-addr-item">
			<view class="add-addr-label">详细地址</view>
			<view class="add-addr-body">
				<input type="text" class="addr-input" placeholder="请输入详细地址" v-model="form.address"/>
			</view>
		</view>
		<view class="add-addr-item addr-default">
			<view class="add-addr-label">设为默认地址</view>
			<view class="add-addr-body">
				<switch @change="setDefault" class="set-default"/>
			</view>
		</view>
		<view class="btn-box" @tap="submit()">
			<addr-btn>确定添加</addr-btn>
		</view>
		<!-- 省市区模态框 -->
		<view class="area-model" v-if="show_area" @tap="closeArea()">
			<view class="area-body" :style="show_area ? '' : 'height:0'" @tap.stop="">
				<view class="area-head">
					<text class='area-select-name'>省市区选择</text>
					<i class="icon" @tap="closeArea()">&#xe634;</i>
				</view>
				<view style="height: 100upx;"></view>
				<view class="area-item" v-for="item in area_list" @tap="selectArea(item.code,item.id,item.name)">{{item.name}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import addrBtn from '../../components/unit/button.vue';
	
	export default{
		components:{ addrBtn },
		data(){
			return {
				form:{
					name : '',
					mobile : '',
					province_id : '',
					city_id : '',
					area_id : '',
					province_name : '',
					city_name : '',
					area_name : '',
					address : '',
					is_default : 0
				},
				form_temp : {},
				area_list : [],
				area_level : 0,
				show_area : false
			}
		},
		onLoad() {
			
		},
		methods:{
			// 验证手机号
			rules() {
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile))) {
					 return this.toast('手机号格式不正确')
				}
				
			},
			//获取省市区列表
			getData(parent_code){
				this.ajax('address/getAddr',{
					data:{parent_code : parent_code},
					success:(res) => {
						this.area_list = res.msg;
					}
				})
			},
			//设置默认地址
			setDefault(e){
				this.form.is_default = e.detail.value ? 1 : 0;
			},
			//选择省市区
			selectArea(code,id,name){
				if(this.area_level == 0){
					this.form.province_id = id;
					this.form.province_name = name
				}
				if(this.area_level == 1) {
					this.form.city_id = id;
					this.form.city_name = name;
				}
				
				if(this.area_level == 2) {
					this.form.area_id = id;
					this.form.area_name = name;
					this.show_area = false;
					//初始化数据
					this.area_level = 0;
					this.area_list = [];
					return false;
				}
				this.area_level ++;
				this.getData(code);
			},
			//选择省市区
			selectAddr(){
				this.show_area = true;
				this.form_temp = JSON.parse(JSON.stringify(this.form));
				this.getData(0)
			},
			//添加地址
			submit(){
				if(!this.form.name)return this.toast('请输入收货人姓名');
				if(!this.form.mobile)return this.toast('请输入手机号码');
				if(!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(this.form.mobile)))
				 return this.toast('手机号格式不正确')
				if(!this.form.province_name)return this.toast('请选择省市区');
				if(!this.form.address)return this.toast('请输入详细地址');
				this.ajax('address/addAddr',{
					data:this.form,
					success:(res) => {
						this.toast(res.msg);
						setTimeout(() => {
							if(res.code)uni.navigateBack();
						},1000);
					}
				});
			},
			//关闭省市区选择
			closeArea(){
				this.show_area = false;
				this.form = this.form_temp;
				this.area_level = 0;
			},
		}
	}
</script>

<style>
	page {
		background-color: #F9F9F9;
	}

	.add-addr-item{
		overflow: hidden;
		height:120upx;
		line-height: 120upx;
		border-bottom: 2upx solid #e1e1e1;
		padding:  0 20upx;
	 background-color: #FFFFFF;}
	.add-addr-item.addr-default {
		border-bottom: 0;
	}
	.add-addr-item > view{float: left;}
	.add-addr-label{width: 180upx;}
	.add-addr-body{width: calc(100% - 180upx);overflow: hidden;}
	.addr-input{height: 40upx;line-height: 40upx;font-size: 30upx;margin-top:40upx;}
	.btn-box{margin-top:40upx}
	.set-default{float: right;transform: scale(0.5) translate(50%);}
	.addr-select{color:#888;float: left;}
	.add-addr-body i.icon-right{float: right;color:#e1e1e1;}
	.area-model{position: fixed;width: 100%;height: 100%;top:0;left:0;background: rgba(0,0,0,0.5);}
	.area-body{position: fixed;width: 100%;height:60%;background: #fff;bottom:0;left:0;overflow-y: auto;
		transition: all 0.3s linear;box-shadow: 6upx 6upx 20upx rgba(26,26,26,0.3);border-top-left-radius: 30upx;border-top-right-radius: 30upx;}
	.area-item{width: calc(100% - 40upx);padding:20upx;border-bottom: 1upx solid #e1e1e1;color:#555;font-size: 32upx;}
	.area-head{width: 100%;box-sizing: border-box;height: 100upx;line-height: 100upx;position: fixed;background: #fff;
			border-top:1upx solid #f1f1f1;padding:0 20upx;}
	.area-select-name{font-weight: bold;font-size: 32upx;}
	.area-head .icon{float: right;}
</style>
